<template>
  <div class="container">
    <div class="tou">
      <img src="../../assets/fh.png" alt="" @click="goback" />
      <h3>电影详情</h3>
    </div>
    <div class="details">
      <div class="content">
            <h4>狗眼电影>{{ movieDetail.nm }}</h4>
        <div class="image">
          <img :src="movieDetail.img" alt="" class="tu" />
        </div>
        <div class="text">
          <h5>{{ movieDetail.nm }}</h5>
          <p>{{ movieDetail.enm }}</p>
          <p>{{ movieDetail.cat }}</p>
          <p>{{ movieDetail.star }}</p>
          <p>{{ movieDetail.rt }}{{ movieDetail.src }}上映/{{movieDetail.dur}}分钟 ></p>
        </div>
        <div class="eye">
          <button>
            <img
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png"
              alt=""
            />
            <span>想看</span>
          </button>
          <button>
            <img
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star.png//"
              alt=""
            />
            <span>看过</span>
          </button>
        </div>
      </div>
      
      <div class="two">
        <div class="logo">
          <img src="../../assets/dog.png" alt="" />
          <p>狗眼评分</p>
            <span class="wish">{{movieDetail.watched}}看过 ></span>
          <span class="wish">{{movieDetail.wish}}想看</span>

        
        </div>
        <div class="people">
          <p class="people_num">{{ movieDetail.sc }}<br>
          <span class="snum">{{movieDetail.snum}}人评</span></p>
          <!-- <p class="people_num2">人想看</p> -->
        </div>
      </div>
      <div class="jianjie">
        <span>简介</span>
        <p>{{ movieDetail.dra }}</p>
      </div>
      <div class="vi">
        <p>视频推荐</p>
        <div class="vid">
          <video :src="movieDetail.vd"></video>
          <img src="../../assets/bf.png" alt="" />
        </div>
      </div>
    </div>
    <div class="di">
      <!-- <p>已经没有了哦~</p> -->
    </div>
    <div class="bottom">
      <img src="../../assets/fx.png" alt="" />
      <button>特惠购票</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    console.log(this.$route.params.id);
  },
  data() {
    return {
      movieDetail: [],
    };
  },
  methods: {
    getData() {
      axios
        .get("/api/homereleaseDetails.json")
        .then((res) => {
          console.log(res.data);
          this.movieDetail = res.data.Details[this.$route.params.id];
          console.log(this.movieDetail);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goback() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
.container {
  background: #173755;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.details {
  padding-top: 40px;
  margin: 0 auto;
  width: 90%;
}
.wish{
    float: right;
    padding-right: 5px;
    padding: 5px;
    font-size: 13px;
    color: rgb(255,255,255,0.27);
}
.content {
  float: left;
  margin-bottom: 20px;
  /* background: orange; */
}
.content > h4 {
  text-align: left;
  margin: 10px 0px 10px 0px;
  color: rgb(201, 201, 201);
  font-weight: normal;
  font-size: 10px;
}
.snum{
       font-size: 13px;
    color: rgb(255,255,255,0.27);
}
.tou {
  width: 100%;
  background: white;
  float: left;
  height: 40px;
  position: fixed;
  top: 0;
}
.tou > img {
  width: 20px;
  float: left;
  margin-top: 10px;
  margin-left: 5px;
}
.tou > h3 {
  float: left;
  margin: 7px 0px 0px 125px;
  color: #663529;
}
.tu {
  width: 100px;
  height: 140px;
}
.image {
  text-align: left;
  float: left;
}
.text {
  float: left;
  text-align: left;
  margin-left: 10px;
  color: white;
}
.text > p {
  font-size: 10px;
  margin: 6px 0px 0px 0px;
  color: rgb(201, 201, 201);
}
.text > h5 {
  margin: 0px;
}
.eye {
  float: left;
  margin-top: 10px;
}
button > img {
  width: 15px;
  padding-left: 20px;
  padding-top: 2px;
  float: left;
}
button > span {
  float: left;
  padding: 0px 0px 0px 3px;
}
.eye > button {
  width: 105px;
  background: rgba(255, 255, 255, 0.582);
  border: 0;
  border-radius: 5px;
  margin-left: 6px;
  height: 25px;
  color: white;
}
.two {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.308);
  float: left;
  border-radius: 10px;
}
.logo {
  margin-top: 0px;
}
.logo > img {
  width: 30px;
  float: left;
}
.logo > p {
  float: left;
  margin-top: 5px;
  font-size: 13px;
  color: white;
}
.people {
  text-align: center;
  position: absolute;
  padding: 30px 0px 0px 120px;
  
}
.people_num {
  text-align: center;
  color: orange;
  float: left;
  margin: 0px;
  font-size: 20px;
  padding-left: 20px;
}
.people_num2 {
  float: left;
  font-size: 10px;
  color: white;
  margin-top: 5px;
}
.jianjie {
  margin-top: 10px;
  float: left;
  text-align: left;
  color: white;
}
.jianjie > p {
  margin-top: 5px;
  font-size: 13px;
}
.vi {
  float: left;
  margin-bottom: 10px;
}
.vi > p {
  color: white;
  text-align: left;
}
.vid > video {
  width: 50%;
  margin-right: 160px;
  float: left;
}
.vid > img {
  float: left;
  width: 30px;

  position: absolute;
  display: block;
  margin-left: 70px;
  margin-top: 30px;
}
.di {
  height: 80px;
  width: 100%;
  background: white;
}
.di > p {
  color: rgb(138, 138, 138);
}
.bottom {
  width: 100%;
  height: 60px;
  background: white;
  float: left;
  position: fixed;
  bottom: 0;
}
.bottom > img {
  width: 20px;
  margin: 20px 0px 0px 20px;
  float: left;
}
.bottom > button {
  border-radius: 20px;
  border: 0px;
  width: 270px;
  height: 40px;
  background: rgb(250, 62, 62);
  color: white;
  font-size: 15px;
  margin: 10px 0px 0px 30px;
}
</style>